html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
}

/* //横屏样式 */
@media (orientation: landscape) {

    /* 定义滚动条的宽度和背景颜色 */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
        background-color: #f5f5f5;
    }

    /* 定义滚动条轨道的样式 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(117, 117, 117, 0.3);
        border-radius: 10px;
        background-color: #f5f5f5;
    }

    /* 定义滚动条滑块的样式 */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(141, 141, 141, 0.3);
        background-color: #929292;
    }
}


/* // 竖屏样式 */
@media (orientation: portrait) {

    /* 定义滚动条的宽度和背景颜色 */
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
        background-color: #f5f5f5;
    }

    /* 定义滚动条轨道的样式 */
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(117, 117, 117, 0.3);
        border-radius: 3px;
        background-color: #f5f5f5;
    }

    /* 定义滚动条滑块的样式 */
    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -webkit-box-shadow: inset 0 0 6px rgba(141, 141, 141, 0.3);
        background-color: #929292;
    }
}